<template>
  <div class='page grey-stage' @touchstart="blur">

  <scroller ref="my_scroller">
    <div class="container perf-set-pdb" :style="containerHeight">
      <group>
        <x-input v-for="(item, key) in inputGroupList" :key="key"
        :placeholder="item.placeholder"
        type='number'
        :icon-type="item.iconType"
        :show-clear="true" @on-blur="onBlur"
        @on-focus="onFocus"
        v-model="item.value"
        @input="input"  placeholder-align="left">
          <label class="weui-label" slot="label" style="width:11em;" @click="blur">{{ item.title }}</label>
        </x-input>
      </group>
      <button class="weui-btn submit-btn" @click="submit">提交</button>
    </div>
  </scroller>
  <crm-tabbar></crm-tabbar>
  </div>
</template>

<script>
  import Vue from 'vue'
  import crmTabbar from '../components/crm-tabbar'

  import Scroller from 'vue-scroller'
  import {Group, XInput, XButton} from 'vux'
  import axios from 'axios'
  import store from '../store'
  import {
    UPDATE_TARGET
  } from '../store/mutation-types';

   export default{
    data () {
    let overHeight = document.body.scrollHeight+2;
    let data = {
      containerHeight : 'height:'+overHeight+'px;',
      currentVal: '',
      isfocus : false,
      inputGroupList : [],
      screenWidth: document.body.clientHeight
    };

    return data;
    },

    components: {
    crmTabbar,
    Group,
    XInput,
    XButton,
    Scroller
    },

    methods: {
    input(value){
    },

    refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
    },

    submit () {
      let that = this;

      var dateData = {};
      var submitData = {};
      var totalTarget = 0;


      dateData['year'] = new Date().getFullYear();
      this.inputGroupList.forEach(function(obj, index){
        var month = index+1;
        dateData['achie_'+month] = obj.value;
        if(obj.value) totalTarget = parseInt(totalTarget) + parseInt(obj.value);
      });


      store.dispatch('saveWorckbenchInfo', dateData).then(function(response){
        if(response.status === 200 && response.data.errcode === 0) {
          alert("保存成功！");
          that.$router.back();
        } else {
          console.debug('系统出错请联系管理员!', JSON.stringify(response.data));
        }
      })

      // var submitData = {
      //   "trace": {
      //     "requestId": "paawerew32wrfsd2543ds"
      //   },
      //
      //   "achievement" : dateData
      // }
      //
      // //接口接通可以开启
      // axios.post(submitData).then(function(response){
      //   if(response.errcode == 0) {
      //     alert('设置成功！')
      //   } else {
      //     alert('服务器错误！请联系管理员!');
      //   }
      //   this.$router.push({ path: '/' });
      // })

      //测试
      // console.log("submitData:", JSON.stringify(submitData));
      // console.log(JSON.stringify(dateData));
      //
      // store.commit(UPDATE_TARGET, totalTarget);
      //
      // console.log(this.$store.state.app.target, 'this.$store.state.app.target')
      //
      // this.$router.push({ path: '/' });


    },

    initInputGroupList () {

      let date = new Date().getFullYear();

      store.dispatch('getAchievementsInfo', 2017).then(function(response) {
      if(response.status === 200 && response.data.errcode === 0) {

        let res = response.data.results;

        inputGroupList.forEach(function(object, index){
          let month = index+1;
          object.value = res['achie_'+month];
        });

        console.log(JSON.stringify(res))

      } else {
        console.debug('系统出错请联系管理员!', JSON.stringify(response.data));
      }
      });

      let inputGroupList = [];

      for(let i=1; i<=12; i++)  {
        inputGroupList.push({
        key:i,
        title: i+'月份',
        iconType: '',
        placeholder: '输入该月业绩目标',
        value: ''
        })
        let j = i-1;
      }

      this.inputGroupList = inputGroupList;
      console.log('22')
    },

    log () {
      this.blur();
    },

    blur() {

      var that = this;
      console.log(this.isIphone(), 'this.isIphone()')
      if(!this.isIphone()){
      if(that.isfocus && document.activeElement.tagName === 'INPUT') {

        if(that.timeId) clearTimeout(that.timeId);

        that.timeId = setTimeout(function () {
        document.activeElement.blur();
        that.isfocus = false;
        }, 200);
      }
      }

    },

    isIphone () {
     var u = navigator.userAgent;
     if (u.indexOf('android') > -1){
       return false
     }else{
       return true
     }
     },

    load (iscroll) {
      console.log('load')
      // Load new data
    },

    test () {
      console.log('test')
    },

    onBlur () {
      this.isfocus = false;
    },

    onFocus(value){
      this.isfocus = true;
      console.log(this.isfocus, 'this.isfocus');
    },


    },

    mounted () {
    console.log(this.isIphone(), 'isIphone')
    this.$refs.my_scroller.resize();
    this.initInputGroupList();
    this.callJsApi('biz.navigation.setTitle',{title:'设置业绩目标'});
    console.log(this.inputGroupList)
    },

    watch:{

    inputGroupList () {
      console.log(this.inputGroupList, JSON.stringify(this.inputGroupList))
    }

    }
   }

</script>

<style lang="less">
  .perf-set-pdb{
    padding-top: 10px;
    padding-bottom: 100px;

    .weui-cells{
    margin-top: 0;
    }

    .submit-btn{
    background-color: #23B2E2;
    width: 90%;
    margin-top: 15px;
    display: block;
    font-size: 16px;
    // color: #23B2E2;
    }
  }
</style>
